<script setup>
  import { artAddListService, artUpdataListService } from '@/api/artcile'
  import { ref } from 'vue'
  // 对话框处理
  const dialogVisible = ref(false)

  // 组件对外暴露一个方法 open ，基于open传来的参数，区分添加还是编辑
  // open({}) => 表单无渲染，说明实体按键
  // open({id,cate_name,...}) => 表单需要渲染，说明时编辑

  // 校验列表
  const formModle = ref({
    cate_alias: '',
    cate_name: ''
  })

  // 校验规则
  const rules = {
    cate_name: [
      { required: true, message: '请输入分类名称', trigger: 'blur' },
      {
        pattern: /^\S{1,10}$/,
        message: '请输入1-10位的非空字符',
        trigger: 'blur'
      }
    ],
    cate_alias: [
      { required: true, message: '请输入分类别名', trigger: 'blur' },
      {
        pattern: /^[a-zA-A0-9]{1,15}$/,
        message: '请输入1-15位非空字母别名',
        trigger: 'blur'
      }
    ]
  }

  //添加文章对话框
  const open = row => {
    dialogVisible.value = true

    formModle.value = { ...row } // 添加 → 重置了表单内容，编辑 → 存储了需要回显的数据
  }

  defineExpose({
    open
  })

  const formRef = ref()
  const emit = defineEmits(['success'])
  //对话框确认事件
  const onSubmit = async () => {
    // 确认前进行一次数据验证，若不通过，则 awit 返回错误信息，不继续执行
    await formRef.value.validate()

    dialogVisible.value = false
    const isEdit = formModle.value.id

    if (!isEdit) {
      await artAddListService(formModle.value)
      ElMessage.success('添加成功')
    } else {
      const res = await artUpdataListService(formModle.value)
      console.log(res)

      ElMessage.success('编辑成功')
    }

    emit('success')

    console.log(formRef.value)
  }
</script>
<template>
  <!-- 对话框 -->
  <el-dialog
    v-model="dialogVisible"
    :title="formModle.id ? '编辑分类' : '添加分类'"
    width="500"
  >
    <el-form
      :model="formModle"
      :rules="rules"
      label-width="100px"
      style="padding-right: 30px"
      ref="formRef"
    >
      <el-form-item label="分类名称" prop="cate_name">
        <el-input
          v-model="formModle.cate_name"
          placeholder="请输入分类名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="分类别名" prop="cate_alias">
        <el-input
          v-model="formModle.cate_alias"
          placeholder="请输入分类别名"
        ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
